From c9d0bd8a7244c8cc5a13e96193ebd1f0f62d07b9 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Thu, 13 Nov 2014 11:26:40 +0100 Subject: [PATCH] Adwaita: simplify scrollbar styling By the use of slider margins. In the process darken the overlay scrollbar trough in fine-tune mode to make it noticiable. --- gtk/resources/theme/Adwaita/_common.scss | 68 +++++++------------ .../theme/Adwaita/gtk-contained-dark.css | 60 +++++++--------- gtk/resources/theme/Adwaita/gtk-contained.css | 60 +++++++--------- 3 files changed, 69 insertions(+), 119 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index fe89e060b2..c3d7457d1e 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -1898,7 +1898,6 @@ column-header.button.dnd { // for treeview-like derive widgets } // slider coloring - %scrollbar_slider_coloring, .slider { border-color: transparent; border-style: solid; @@ -1919,11 +1918,10 @@ column-header.button.dnd { // for treeview-like derive widgets &.overlay-indicator { // Overlay scrolling indicator -GtkRange-slider-width: 8px; - &.vertical .slider, - &.horizontal .slider { + .slider { background-color: transparentize($fg_color, 0.7); border-width: 2px; - border-radius: 30px; + border-radius: 100px; } .trough { @@ -1935,53 +1933,38 @@ column-header.button.dnd { // for treeview-like derive widgets &.hovering { -GtkRange-slider-width: 13; - &.vertical { - @extend %scrollbar_vertical_sizing; - - .slider { - @extend %scrollbar_slider_coloring; + .slider { border-width: 1px; } - border-width: 1px 1px 1px 2px; // see comments in the sizing part - &:dir(rtl) { border-width: 1px 2px 1px 1px; } - } + .trough { + border-color: transparentize($borders_color, 0.3); + background-color: transparentize($scrollbar_bg_color, 0.3); } - &.horizontal { - @extend %scrollbar_horizontal_sizing; + &.fine-tune { - .slider { - @extend %scrollbar_slider_coloring; + .slider { border-width: 3px; } - border-width: 2px 1px 1px 1px; - } - } - - .trough { - border-color: transparentize($borders_color, 0.3); - background-color: transparentize($scrollbar_bg_color, 0.3); + .trough { background-color: if($variant=='light', darken($scrollbar_bg_color, 3%), lighten($scrollbar_bg_color, 3%)); } } } } - // sizing - %scrollbar_vertical_sizing, + // borders and margins + .slider { + border-width: 3px; + border-radius: 100px; + } + + &.fine-tune .slider { border-width: 4px; } + &.vertical { - .slider { - border-width: 3px 3px 3px 4px; // This is used as a margin actually, it's uneven since the - // trough border needs to be compensated - border-radius: 6px; - border-top-left-radius: 7px 6px; // uneven vertical/horizontal radius since borders are uneven - border-bottom-left-radius: 7px 6px; // - &.fine-tune { border-width: 4px 4px 4px 5px; } + .slider { + margin-left: 1px; &:dir(rtl) { - border-width: 3px 4px 3px 3px; - border-radius: 6px; - border-top-right-radius: 7px 6px; - border-bottom-right-radius: 7px 6px; - - &.fine-tune { border-width: 4px 5px 4px 4px; } + margin-left: 0; + margin-right: 1px; } } @@ -1995,15 +1978,10 @@ column-header.button.dnd { // for treeview-like derive widgets } } - %scrollbar_horizontal_sizing, &.horizontal { - .slider { - border-width: 4px 3px 3px 3px; - border-radius: 6px; - border-top-right-radius: 7px 5px; // This is actually bogus, to workaround a gtk+ border radius drawing issue - border-top-left-radius: 6px 7px; - &.fine-tune { border-width: 5px 4px 4px 4px; } + .slider { + margin-top: 1px; } .trough { border-top-style: solid; } diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 116e26b0cb..d910b87f7c 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -2408,71 +2408,57 @@ column-header .titlebar .button.titlebutton, .scrollbar .trough:backdrop { background-color: #323737; border-color: #1e2222; } - .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar .slider { border-color: transparent; border-style: solid; background-color: #818584; background-clip: padding-box; } - .scrollbar.overlay-indicator.dragging.vertical .slider:hover, .scrollbar.overlay-indicator.hovering.vertical .slider:hover, .scrollbar.overlay-indicator.dragging.horizontal .slider:hover, .scrollbar.overlay-indicator.hovering.horizontal .slider:hover, .scrollbar .slider:hover { background-color: #a5a8a6; } - .scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, .scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, .scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, .scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active, .scrollbar .slider:prelight:active { background-color: #2a76c6; } - .scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, .scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, .scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, .scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop, .scrollbar .slider:backdrop { background-color: #5d6161; } - .scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, .scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, .scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, .scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive, .scrollbar .slider:insensitive { background-color: transparent; } .scrollbar.overlay-indicator { -GtkRange-slider-width: 8px; } - .scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider { + .scrollbar.overlay-indicator .slider { background-color: rgba(238, 238, 236, 0.3); border-width: 2px; - border-radius: 30px; } + border-radius: 100px; } .scrollbar.overlay-indicator .trough { border-color: transparent; background-color: transparent; } .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering { -GtkRange-slider-width: 13; } - .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider { - border-width: 1px 1px 1px 2px; } - .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) { - border-width: 1px 2px 1px 1px; } - .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider { - border-width: 2px 1px 1px 1px; } + .scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider { + border-width: 1px; } .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough { border-color: rgba(28, 31, 31, 0.7); background-color: rgba(40, 44, 44, 0.7); } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider { - border-width: 3px 3px 3px 4px; - border-radius: 6px; - border-top-left-radius: 7px 6px; - border-bottom-left-radius: 7px 6px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune { - border-width: 4px 4px 4px 5px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) { - border-width: 3px 4px 3px 3px; - border-radius: 6px; - border-top-right-radius: 7px 6px; - border-bottom-right-radius: 7px 6px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical .slider:dir(rtl).fine-tune { - border-width: 4px 5px 4px 4px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough { + .scrollbar.overlay-indicator.dragging.fine-tune .slider, .scrollbar.overlay-indicator.hovering.fine-tune .slider { + border-width: 3px; } + .scrollbar.overlay-indicator.dragging.fine-tune .trough, .scrollbar.overlay-indicator.hovering.fine-tune .trough { + background-color: #2f3434; } + .scrollbar .slider { + border-width: 3px; + border-radius: 100px; } + .scrollbar.fine-tune .slider { + border-width: 4px; } + .scrollbar.vertical .slider { + margin-left: 1px; } + .scrollbar.vertical .slider:dir(rtl) { + margin-left: 0; + margin-right: 1px; } + .scrollbar.vertical .trough { border-left-style: solid; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) { + .scrollbar.vertical .trough:dir(rtl) { border-left-style: none; border-right-style: solid; } - .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider { - border-width: 4px 3px 3px 3px; - border-radius: 6px; - border-top-right-radius: 7px 5px; - border-top-left-radius: 6px 7px; } - .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune { - border-width: 5px 4px 4px 4px; } - .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough { + .scrollbar.horizontal .slider { + margin-top: 1px; } + .scrollbar.horizontal .trough { border-top-style: solid; } .scrollbars-junction, diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index e2ee8f1294..fea5d57920 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -2405,71 +2405,57 @@ column-header .titlebar .button.titlebutton, .scrollbar .trough:backdrop { background-color: #e5e5e5; border-color: #a8a8a8; } - .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar .slider { border-color: transparent; border-style: solid; background-color: #a0a3a3; background-clip: padding-box; } - .scrollbar.overlay-indicator.dragging.vertical .slider:hover, .scrollbar.overlay-indicator.hovering.vertical .slider:hover, .scrollbar.overlay-indicator.dragging.horizontal .slider:hover, .scrollbar.overlay-indicator.hovering.horizontal .slider:hover, .scrollbar .slider:hover { background-color: #7a7e7f; } - .scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, .scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, .scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, .scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active, .scrollbar .slider:prelight:active { background-color: #2a76c6; } - .scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, .scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, .scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, .scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop, .scrollbar .slider:backdrop { background-color: #c6c7c8; } - .scrollbar.overlay-indicator.dragging.vertical .slider:insensitive, .scrollbar.overlay-indicator.hovering.vertical .slider:insensitive, .scrollbar.overlay-indicator.dragging.horizontal .slider:insensitive, .scrollbar.overlay-indicator.hovering.horizontal .slider:insensitive, .scrollbar .slider:insensitive { background-color: transparent; } .scrollbar.overlay-indicator { -GtkRange-slider-width: 8px; } - .scrollbar.overlay-indicator.vertical .slider, .scrollbar.overlay-indicator.horizontal .slider { + .scrollbar.overlay-indicator .slider { background-color: rgba(46, 52, 54, 0.3); border-width: 2px; - border-radius: 30px; } + border-radius: 100px; } .scrollbar.overlay-indicator .trough { border-color: transparent; background-color: transparent; } .scrollbar.overlay-indicator.dragging, .scrollbar.overlay-indicator.hovering { -GtkRange-slider-width: 13; } - .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar.overlay-indicator.hovering.vertical .slider { - border-width: 1px 1px 1px 2px; } - .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl) { - border-width: 1px 2px 1px 1px; } - .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar.overlay-indicator.hovering.horizontal .slider { - border-width: 2px 1px 1px 1px; } + .scrollbar.overlay-indicator.dragging .slider, .scrollbar.overlay-indicator.hovering .slider { + border-width: 1px; } .scrollbar.overlay-indicator.dragging .trough, .scrollbar.overlay-indicator.hovering .trough { border-color: rgba(161, 161, 161, 0.7); background-color: rgba(219, 219, 219, 0.7); } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider, .scrollbar.vertical .slider { - border-width: 3px 3px 3px 4px; - border-radius: 6px; - border-top-left-radius: 7px 6px; - border-bottom-left-radius: 7px 6px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider.fine-tune, .scrollbar.vertical .slider.fine-tune { - border-width: 4px 4px 4px 5px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl), .scrollbar.vertical .slider:dir(rtl) { - border-width: 3px 4px 3px 3px; - border-radius: 6px; - border-top-right-radius: 7px 6px; - border-bottom-right-radius: 7px 6px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .slider:dir(rtl).fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .slider:dir(rtl).fine-tune, .scrollbar.vertical .slider:dir(rtl).fine-tune { - border-width: 4px 5px 4px 4px; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough, .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough, .scrollbar.vertical .trough { + .scrollbar.overlay-indicator.dragging.fine-tune .slider, .scrollbar.overlay-indicator.hovering.fine-tune .slider { + border-width: 3px; } + .scrollbar.overlay-indicator.dragging.fine-tune .trough, .scrollbar.overlay-indicator.hovering.fine-tune .trough { + background-color: lightgray; } + .scrollbar .slider { + border-width: 3px; + border-radius: 100px; } + .scrollbar.fine-tune .slider { + border-width: 4px; } + .scrollbar.vertical .slider { + margin-left: 1px; } + .scrollbar.vertical .slider:dir(rtl) { + margin-left: 0; + margin-right: 1px; } + .scrollbar.vertical .trough { border-left-style: solid; } - .scrollbar .scrollbar.overlay-indicator.dragging.vertical .trough:dir(rtl), .scrollbar .scrollbar.overlay-indicator.hovering.vertical .trough:dir(rtl), .scrollbar.vertical .trough:dir(rtl) { + .scrollbar.vertical .trough:dir(rtl) { border-left-style: none; border-right-style: solid; } - .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider, .scrollbar.horizontal .slider { - border-width: 4px 3px 3px 3px; - border-radius: 6px; - border-top-right-radius: 7px 5px; - border-top-left-radius: 6px 7px; } - .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .slider.fine-tune, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .slider.fine-tune, .scrollbar.horizontal .slider.fine-tune { - border-width: 5px 4px 4px 4px; } - .scrollbar .scrollbar.overlay-indicator.dragging.horizontal .trough, .scrollbar .scrollbar.overlay-indicator.hovering.horizontal .trough, .scrollbar.horizontal .trough { + .scrollbar.horizontal .slider { + margin-top: 1px; } + .scrollbar.horizontal .trough { border-top-style: solid; } .scrollbars-junction, -- 2.30.2